import { LOGIN_TOKEN } from '@/global/constants'
import { localCache } from '@/utils/cache'
import { createRouter, createWebHashHistory } from 'vue-router'
import { firstMemu } from '@/utils/map-menus'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/main',
    },
    // login和main是一级路由，<router-view>标签写在app.vue里面
    // mian中左侧菜单区与右侧内容区是二级路由，<router-view>标签写在mian.vue里面
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login/Login.vue'),
    },
    {
      path: '/main',
      name: 'main',
      component: () => import('../views/main/Main.vue'),
      // 二级路由
      children: [
        // 这种将路由全部写死的路由叫做静态路由，弊端：用户如果没有权限访问/main/system/role页面(根据角色获取到的左侧菜单列表中不包含这个页面)，但是用户可以通过在地址栏中输入/main/system/role进入对应的页面
        // 动态路由：不要一上来就将所有的页面注册路由，而是根据用户的权限动态注册路由，用户没权限时就算在地址栏中输入了正确的路径，也展示不出对应的页面
        // {
        //   path: '/main/analysis/overview',
        //   component: () => import('../views/main/analysis/overview/overview.vue'),
        // },
        // {
        //   path: '/main/analysis/dashboard',
        //   component: () => import('../views/main/analysis/dashboard/dashboard.vue'),
        // },
        // {
        //   path: '/main/system/role',
        //   component: () => import('../views/main/system/role/role.vue'),
        // },
        // {
        //   path: '/main/system/user',
        //   component: () => import('../views/main/system/user/user.vue'),
        // },
      ],
    },
    {
      // 匹配所有未被其他路由规则明确匹配到的路径 Vue Router4 中推荐的写法
      path: '/:pathMatch(.*)',
      name: 'NotFound',
      component: () => import('../views/not-found/NotFound.vue'),
    },
  ],
})

// 路由导航守卫---没token的时候去登录页面
router.beforeEach((to, from) => {
  const token = localCache.getCache(LOGIN_TOKEN)
  if (to.path.startsWith('/main') && !token) {
    return '/login'
  }

  // 登录成功后，跳转到/main页面，但是这个时候应该进入到第一个<el-menu-item>页面
  if (to.path === '/main') {
    return firstMemu.route
  }
})

export default router
